<template>
  <div>
    <div id="crossBar2" ref="crossBar2" style="height:200px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'CrossBar2',
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.crossBar2)
      var totalCost = [100, 100, 100, 100, 100] // 背景色比例
      var visits = [82.32, 73.56, 22.9, 48.34, 73.56] // 数值
      var grade = ['xx项目', 'xx项目', 'xx项目', 'xx项目', 'xx项目']
      var data = {
        grade: grade,
        totalCost: totalCost,
        visits: visits
      }
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        title: {
          text: '2019年清洁取暖项目进度',
          x: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '14'
          }
        },
        grid: {
          top: 30,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          show: false
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: 'category',

            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            },
            data: data.grade
          },
          {
            type: 'category',

            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: data.visits
          }
        ],
        series: [
          // 灰色背景条
          {
            type: 'bar',
            z: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                color: 'rgb(18,23,55)',
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            barWidth: '15',
            data: data.totalCost
          },
          // 渐变条
          {
            type: 'bar',
            z: 10,
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#6390F0'
                  },
                  {
                    offset: 1,
                    color: '#25EBE9'
                  }
                ]),
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            barWidth: '15',

            data: data.visits
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
